<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="header">考生报名</div>
			<div class="title">{{title}}</div>
			<div class="table">
				<div class="picdiv">
					<el-image style="width: 100%; height: 100%" :src="info.avatorPath" fit="fill"></el-image>
				</div>
				<div class="row">
					<div class="cell f2">姓 名</div>
					<div class="cell f1">{{info.userName}}</div>
				</div>
				<div class="row">
					<div class="cell f2">性 别</div>
					<div class="cell f1">{{info.gender}}</div>
				</div>
				<div class="row">
					<div class="cell f2">身份证号</div>
					<div class="cell f1">{{info.idCard}}</div>
				</div>
				<div class="row">
					<div class="cell f2">民 族</div>
					<div class="cell f1">{{info.nation}}</div>
				</div>
				<div class="row">
					<div class="cell f2">政治面貌</div>
					<div class="cell f1">{{info.political}}</div>
					<div class="cell f2">最高学历</div>
					<div class="cell f1">{{info.education}}</div>
				</div>
				<div class="row">
					<div class="cell f2">毕业院校</div>
					<div class="cell f1">{{info.school}}</div>
					<div class="cell f2">专 业</div>
					<div class="cell f1">{{info.major}}</div>
				</div>
				<div class="row">
					<div class="cell f2">学 位</div>
					<div class="cell f1">{{info.degree}}</div>
					<div class="cell f2">是否全日制</div>
					<div class="cell f1">{{info.fullEducation}}</div>
					
				</div>
				<div class="row">
					<div class="cell f2">考场号</div>
					<div class="cell f1">{{info.examPointId}}</div>
					<div class="cell f2">手 机</div>
					<div class="cell f1">{{info.phone}}</div>
				</div>
				<div class="row">
					<div class="cell f2">毕业时间</div>
					<div class="cell f1">{{info.schoolTime}}</div>
					<div class="cell f2">考 区</div>
					<div class="cell f1">{{info.examPointId}}</div>
				</div>
				<div class="row">
					<div class="cell f2">邮 箱</div>
					<div class="cell f1">{{info.email}}</div>
					<div class="cell f2"></div>
					<div class="cell f1"></div>
				</div>
				<div class="row autogrow">
					<div class="cell f2">教育经历</div>
					<div class="cell f1">
						<el-table border :data="info.eduExperience" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
							<el-table-column label="开始时间" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.startdate}}
								</template>
							</el-table-column>
							<el-table-column label="结束时间" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.enddate}}
								</template>
							</el-table-column>
							<el-table-column label="学校名称" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.school}}
								</template>
							</el-table-column>
							<el-table-column label="学历" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.education}}
								</template>
							</el-table-column>
							<el-table-column label="专业" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.special}}
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<div class="row autogrow">
					<div class="cell f2">工作经历</div>
					<div class="cell f1">
						<el-table border :data="info.workExperience" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
							<el-table-column label="开始时间" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.startdate}}
								</template>
							</el-table-column>
							<el-table-column label="结束时间" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.enddate}}
								</template>
							</el-table-column>
							<el-table-column label="单位名称" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.company}}
								</template>
							</el-table-column>
							<el-table-column label="岗位" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.job}}
								</template>
							</el-table-column>
							<el-table-column label="岗位职责" align="left" header-align="center">
								<template slot-scope="scope">
									{{scope.row.jobwork}}
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<div class="info">
				<div class="infob"> <span
						style="color:#FF3737;margin-right:10px;">提示：</span>报名表中所有字段均为必填字段，如无经历或本人无该项信息则填写“无”。</div>
				<div class="infob"> <span
						style="color:#FF3737;margin-right:10px;">本人承诺：</span>本人符合招聘岗位条件，以上所填内容属实，如有不实之处，愿意承担相应责任。</div>
			</div>
			<div class="savebtn">
				<el-button type="primary" class="infobtn" @click="toaudit">信息审核</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	// import config from "@/js/config";
	export default {
		data() {
			return {
				id: this.$route.query.id,
				title: '报名表确认',
				info:null
				
			};
		},
		computed: {},
		mounted() {
			this.getchengnuo()
			this.getbaseinfo()
		},

		methods: {
			getchengnuo(){
				this.$api.Join.Getchengnuo({id:this.id}).then(res=>{
					this.title=res.data.examinationName+'报名表确认'
				})
			},
			getbaseinfo(){
				this.$api.Join.Getbaseinfoall({examId:this.id}).then(res=>{
					this.info=res.data
					this.info.eduExperience=JSON.parse(this.info.eduExperience)
					this.info.workExperience=JSON.parse(this.info.workExperience)
					
				})
			},
			async toaudit(){
				try{
					var res=await this.$api.Join.Toaudit({examId:this.id})
					this.$message.success('提交成功')
					this.$router.push({ name: 'Joinfo', query: { id:this.id } })
				}catch(e){
					this.$message.error(e.msg)
				}
			},
			
		},
	};
</script>

<style lang="less" scoped>
	

	.rightcontainer {
		width: 920px;
		margin: 0 auto 40px;
		overflow: hidden;

		.rightmain {
			width: 100%;
			margin: 20px 0;

			.info {
				color: #383838;
				font-size: 16px;
				padding: 8px 12px;
				border: 1px dashed #888;
				margin: 42px 0 12px;
				background-color: #eee;

				.infot {
					line-height: 24px;
					font-weight: bold;
				}

				.infob {
					line-height: 28px;
					margin-top: 6px;
				}
			}
			.savebtn{
				display:flex;
				justify-content:center;
				align-items:center;
				width:100%;
				height:80px;
				.infobtn{
						background-color:#134B9F;
						border:none;
					}
			}
			.header {
				color: #134B9F;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				padding-bottom: 9px;
				border-bottom: 2px solid #134B9F;
				display: inline-block;
				letter-spacing: 2px;
			}

			.title {
				height: 70px;
				color: #3C3C3C;
				font-size: 26px;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.table {
				border-left: 2px solid #ccc;
				border-top: 2px solid #ccc;
				width: 100%;
				margin-top: 16px;
				font-size: 16px;
				color:#666;
				position:relative;
				.picdiv{
					position:absolute;
					right:2px;
					top:0;
					width:128px;
					height:178px;
					background-color: #fff;
					border-left:2px solid #ccc;
				}
				.autogrow{
					min-height:45px;
					height:auto !important;
					.cell{
						padding:12px 12px;
					}
				}
				.row{
					display: flex;
					flex-direction: row;
					width: 100%;
					height:45px;
					.cell {
						border-right: 2px solid #ccc;
						border-bottom: 2px solid #ccc;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						box-sizing:border-box;
						
					}
					.f2{
						width:200px;
						padding-left: 55px;
					}
					.f1{
						flex:1;
						padding-left: 18px;
					}
					
				}
				
			}
			
		}
	}
</style>
